<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:ace="http://www.icefaces.org/icefaces/components"
    xmlns:ice="http://www.icesoft.com/icefaces/component"
    xmlns:icecore="http://www.icefaces.org/icefaces/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:b="http://java.sun.com/jsf/composite/ezcomp"
    template="/resources/templates/template.xhtml">
    
    <ui:define name="title">TallerStudio</ui:define>
   
    <ui:define name="body">
        <h:form id="formBody">
            #{clienteMBean.selectedText}
            <ace:panel id="pnlEditar" header="Actualización de Cliente">
                <h:panelGrid columns="5" style="width: 90%" columnClasses="colwidth25,colwidth1,colwidth20,colwidth1,colwidth40">
                    <h:outputLabel value="Rut" />
                    <h:outputLabel value=":" />
                    <h:column>
                        <ace:maskedEntry id="rutId" dir="RTL" value="#{clienteMBean.cliente.rutClie}" mask="9999999?9" placeHolder="" size="10" required="true" requiredMessage="El rut es requerido."/>
                        -
                        <h:inputText id="dvId" value="#{clienteMBean.cliente.dvClie}" maxlength="1"  styleClass="inputDv"/>
                    </h:column>
                    <h:outputLabel value="*" style="color:red;"/>
                    <h:column>
                        <h:outputLabel value="#{clienteMBean.msgRut}" style="color:red;"/>
                        <h:message for="rutId" errorClass="error"/>
                    </h:column>
                    
                    <h:outputLabel value="Nombres" />
                        <h:outputLabel value=":" />
                    <h:column>
                        <h:inputText id="nombreId" styleClass="inputStyle" value="#{clienteMBean.cliente.nombresClie}" required="true" requiredMessage="El nombre es requerido." />
                    </h:column>
                    <h:outputLabel value="*" style="color:red;"/>
                    <h:message for="nombreId" errorClass="error" />
                    
                    <h:outputLabel value="Apellidos" />
                        <h:outputLabel value=":" />
                    <h:column>
                        <h:inputText id="apeId" styleClass="inputStyle"  value="#{clienteMBean.cliente.apellidosClie}" required="true" requiredMessage="El apellido es requerido." />
                    </h:column>
                    <h:outputLabel value="*" style="color:red;"/>
                    <h:message for="apeId" errorClass="error" />
               
                    <h:outputLabel value="Dirección" />
                        <h:outputLabel value=":" />
                    <h:column>
                        <h:inputText id="dirId" styleClass="inputStyle" value="#{clienteMBean.cliente.direccionClie}" required="true" requiredMessage="La dirección es requerida." />
                    </h:column>
                    <h:outputLabel value="*" style="color:red;"/>
                    <h:message for="dirId" errorClass="error" />
                    
                     <!--Auto completar-->
                    <h:outputLabel value="Comuna" />
                    <h:outputLabel value=":" />
                    <h:column>
                        <ace:autoCompleteEntry id="selComunaID"
                                       value="#{clienteMBean.selectedText}"
                                       listVar="com"
                                       listValue="#{clienteMBean.comunas}"
                                       filterBy="#{com.nomComu}"
                                       required="true"
                                       requiredMessage="La comuna es requerida."
                                       width="237">
                            <f:facet name="row">
                               <h:outputText value="#{com.nomComu}" />
                            </f:facet>
                        </ace:autoCompleteEntry>
                    </h:column>
                    <h:outputLabel value="*" style="color:red;"/>
                    <h:message for="selComunaID" errorClass="error" />
                    
                    <h:outputLabel value="Teléfono Principal" />
                        <h:outputLabel value=":" />
                    <h:column>
                        <h:inputText id="fonoId" styleClass="inputStyle" value="#{clienteMBean.cliente.fono}" required="true" requiredMessage="El teléfono es requerido." />
                    </h:column>
                    <h:outputLabel value="*" style="color:red;"/>
                    <h:message for="fonoId" errorClass="error" />
                    
                    <h:outputLabel value="Mail" />
                        <h:outputLabel value=":" />
                    <h:column>
                        <h:inputText id="mailId" styleClass="inputStyle" value="#{clienteMBean.cliente.EMail}" />
                    </h:column>
                    <h:panelGroup/><h:panelGroup/>
                    
                    <h:outputLabel value="Canal Comunicación Preferida" />
                        <h:outputLabel value=":" />
                    <h:column>
                        <h:selectOneMenu id="selCanalId" styleClass="selectStyle" value="#{clienteMBean.cliente.canalComunicacion}" >
                            <f:selectItem itemLabel="SIN PREFERENCIA" itemValue="0" />
                            <f:selectItem itemLabel="TELÉFONO" itemValue="1" />
                            <f:selectItem itemLabel="CORREO ELECTRÓNICO" itemValue="2" />
                        </h:selectOneMenu>
                    </h:column>
                    <h:panelGroup/><h:panelGroup/>
                    
                    <h:outputLabel value="Información Adicional" />
                        <h:outputLabel value=":" />
                    <h:column>
                        <ace:checkboxButton value="#{clienteMBean.check}" >
                            <ace:ajax execute="@this" event="activate" render="pnlGropup pnlInformacionAdicional"/>
                        </ace:checkboxButton>
                    </h:column>
                </h:panelGrid>
                
                <h:panelGroup id="pnlGropup">
                <h:panelGrid id="pnlInformacionAdicional" headerClass="headerPanel" rendered="#{clienteMBean.check}" columns="6" style="width: 100%" columnClasses="colwidth15,colwidth1,colwidth30,colwidth15,colwidth1,colwidth30">
                     <f:facet name="header">Información Adicional Cliente</f:facet>
                    
                    <h:outputLabel value="Teléfono Alternativo" />
                    <h:outputLabel value=":" />
                    <h:inputText id="fono2Id" styleClass="inputStyle" value="#{clienteMBean.cliente.fono2}" />
                    
                    
                    <h:outputLabel value="Fecha de Nacimiento" />
                    <h:outputLabel value=":" />
                    <ace:maskedEntry id="fechaId" style="width: 70px" value="#{clienteMBean.cliente.fechaNacimiento}" mask="99/99/9999" >
                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                    </ace:maskedEntry>
                 
                    <h:outputLabel value="Sexo" />
                        <h:outputLabel value=":" />
                        <h:selectOneRadio id="selSexoID" value="#{clienteMBean.cliente.sexo}" layout="pageDirection">
                           <f:selectItem itemLabel="Masculino" itemValue="M" />
                            <f:selectItem itemLabel="Femenino" itemValue="F" />
                        </h:selectOneRadio>
                    
                    
                    <h:outputLabel value="Estado Civil" />
                        <h:outputLabel value=":" />
                        <h:selectOneMenu id="selEstadoId" value="#{clienteMBean.cliente.estadoCivil}" styleClass="selectStyle" >
                            <f:selectItem itemLabel="NO DECLARADO" itemValue="NO DECLARADO" />
                            <f:selectItem itemLabel="SOLTERO" itemValue="SOLTERO" />
                            <f:selectItem itemLabel="CASADO" itemValue="CASADO" />
                            <f:selectItem itemLabel="VIUDO" itemValue="VIUDO" />
                            <f:selectItem itemLabel="SEPARADO" itemValue="SEPARADO" />
                        </h:selectOneMenu>
                    
                </h:panelGrid>
                 </h:panelGroup>
            </ace:panel>
           <div id="contenidoBotonesId" class="contenidoBotones">
               <f:ajax>
                <b:boton value="Volver a la lista" title="Volver a la lista" styleClass="flotarIzquierda" action="#{clienteMBean.volver}"/>
               </f:ajax> 
                <b:boton value="Aceptar" title="Aceptar" styleClass="flotarDerecha" action="#{clienteMBean.editar}"/>
            </div>
        </h:form>
    </ui:define>

</ui:composition>

